<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" th:href="@{../css/bootstrap.min.css}" />
		<link rel="stylesheet" th:href="@{../css/bootstrap-responsive.min.css}" />
		<link rel="stylesheet" th:href="@{../css/jquery-ui.css}" />
		<link rel="stylesheet" th:href="@{../css/uniform.css}" />
		<link rel="stylesheet" th:href="@{../css/unicorn.main.css}" />
		<link rel="stylesheet" th:href="@{../css/unicorn.grey.css}" class="skin-color" />

	</head>
	<body >
		<th:block th:replace="common/header :: header"></th:block>
		<th:block th:replace="common/leftMenu :: leftMenu"></th:block>
		<div id="content">
			<iframe src="/users/info?guid=" name="iframe" id="external-frame"
					frameborder="0" width="100%" scrolling="no" min-height="200"
					onload="setIframeHeight(this)"/>
		</div>

	</body>

	<script  th:src="@{../js/jquery.min.js}" ></script>
	<script  th:src="@{../js/bootstrap.min.js}" ></script>
	<script  th:src="@{../js/jquery.uniform.js}" ></script>
	<script  th:src="@{../js/unicorn.js}" ></script>

	<script th:inline="javascript">
	/*<![CDATA[*/
        //页面加载设置高度
        window.onload = function () {
            setIframeHeight(document.getElementById('external-frame'));
            getMenu();
        };
        // 处理传入页面的高度
        function setIframeHeight(iframe) {
            if (iframe) {
                var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
                if (iframeWin.document.body) {
                    iframe.height=0;
                    iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
                }
            }
        };

        //子页面自适应高度
        $("#external-frame").load(function(){
            var mainheight = $(this).contents().find("body").height()+160;
            $(this).height(mainheight);
        });
        //获取页面的滚动高度子页面接收
        var scrollHeight=0;
        $(window).scroll(function(){
            scrollHeight= $(this).scrollTop();
        });

        //页面加载的时候获取菜单
        function getMenu() {
            var menuData =eval( /*[[${menuData}]]*/ );

            var MenuStr="";
            for (var items = 0;items<menuData.length;items++) {
                MenuStr += '<li class="submenu">\
                                <a href="#"><i><img src='+menuData[items].oneMenuImg+' alt=""></i> <span>'+menuData[items].oneMenuName+'</span><i><img src="" alt=""></i></a><ul>'
                if(menuData[items].sendMenuList.length > 0){
                    for(var i = 0;i<menuData[items].sendMenuList.length;i++){
                        MenuStr += '<li><a href='+menuData[items].sendMenuList[i].secondMenuUrl+' target="iframe">'+menuData[items].sendMenuList[i].secondMenuName+'</a></li>'
                    }
                    MenuStr+='</ul></li>';
                    $("#sidebar>ul").append(MenuStr);
                    MenuStr="";
                }else {
                    MenuStr+='</ul></li>';
                    $("#sidebar>ul").append(MenuStr);
                }
                MenuStr="";
            }
            MenuClick();
			//给菜单绑定事件
            function MenuClick() {
                // 选择状态的处理
                $("#sidebar>ul>li").bind("click",function(){
                    $(this).siblings('li').removeClass('active');
                    $(this).addClass('active');
                    if($(this).hasClass("open")){
                        $(this).find("i").eq(1).find("img").attr("src","./img/svg/btn_jiantou_up.svg");
                        $(this).siblings('li').each(function () {
                            $(this).find("i").eq(1).find("img").removeAttr("src");
                        })
                    }else{
                        $(this).find("i").eq(1).find("img").removeAttr("src");
                    }
                })

                //菜单打开操作
                $('.submenu > a').click(function(e)
                {
                    e.preventDefault();
                    var submenu = $(this).siblings('ul');
                    var li = $(this).parents('li');
                    var submenus = $('#sidebar li.submenu ul');
                    var submenus_parents = $('#sidebar li.submenu');
                    if(li.hasClass('open'))
                    {
                        if(($(window).width() > 768) || ($(window).width() < 479)) {
                            submenu.slideUp();
                        } else {
                            submenu.fadeOut(250);
                        }
                        li.removeClass('open');
                    } else
                    {
                        if(($(window).width() > 768) || ($(window).width() < 479)) {
                            submenus.slideUp();
                            submenu.slideDown();
                        } else {
                            submenus.fadeOut(250);
                            submenu.fadeIn(250);
                        }
                        submenus_parents.removeClass('open');
                        li.addClass('open');
                    }
                });

                var ul = $('#sidebar > ul');

                $('#sidebar > a').click(function(e)
                {
                    e.preventDefault();
                    var sidebar = $('#sidebar');
                    if(sidebar.hasClass('open'))
                    {
                        sidebar.removeClass('open');
                        ul.slideUp(250);
                    } else
                    {
                        sidebar.addClass('open');
                        ul.slideDown(250);
                    }
                });
            }
        }
	/*]]>*/
    </script>
	</html>
